<template>
  <view class="mine">
    <view class="header">
      <view class="header-background" v-if="hasLogin">
        <image :src="userInfo.icon" mode="aspectFill" />
      </view>
      <view class="header-background" v-else>
        <image src="../../static/icons/my-active.png" mode="aspectFill" />
      </view>
      <view class="header-photo" v-if="hasLogin" @click="toSelfCenter">
        <view class="header-photo-box" >
          <image :src="userInfo.icon ? userInfo.icon : '../../static/icons/my-active.png'" mode="aspectFill" />
        </view>
        <text class="header-username">{{userInfo.username}}</text>
      </view>
      <view class="header-photo" v-else>
        <view class="header-photo-box">
          <image src="../../static/icons/my-active.png" mode="aspectFill" />
        </view>
        <text class="header-username">您尚未登录，请先登录</text>
		<button size="mini" type="info" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">去登录</button>
        <!-- <button size="mini" type="info" @click="gotoLogin">去登录</button> -->
      </view>
      <view class="header-info" v-if="userInfo.description">
        <view class="header-info-box">
          <text class="header-like">个人介绍：{{userInfo.description}}</text>
          <!-- <text>9999</text> -->
        </view>
<!--        <view class="header-info-box">
          <text class="header-like">关注</text>
          <text>13</text>
        </view>
        <view class="header-info-box">
          <text class="header-like">评价数</text>
          <text>12.3w</text>
        </view> -->
      </view>
    </view>
    <view class="content">
		<view class="content-list" @click="openMyMessage">
		  <view class="content-list-title">
		   <!--  <uni-icons type="contact" size="16" color="#666"></uni-icons>-->
			<text class="icon icongerenzhongxin"></text>
			<text>个人中心</text>
		  </view>
		  <view class="icon iconarrow-right"></view>
		</view>
      <view class="content-list" @click="openMyRemark">
        <view class="content-list-title">
          <!-- <uni-icons type="contact" size="16" color="#666"></uni-icons>-->
          <text class="icon iconfuwudianping"></text>
          <text>点评主页</text>
        </view>
        <view class="icon iconarrow-right"></view>
      </view>
      <view class="content-list" @click="openMyDisk">
        <view class="content-list-title">
         <!--  <uni-icons type="contact" size="16" color="#666"></uni-icons>-->
          <text class="icon icontubiaozhizuosvg-07"></text>
          <text>光盘行动</text>
        </view>
        <view class="icon iconarrow-right"></view>
      </view>
	  <view class="content-list" @click="openActivityApply">
	    <view class="content-list-title">
	     <!--  <uni-icons type="contact" size="16" color="#666"></uni-icons>-->
	      <text class="icon iconshenqingjiaru"></text>
	      <text>我的报名</text>
	    </view>
	    <view class="icon iconarrow-right"></view>
	  </view>
    </view>
  </view>
</template>

<script>
import {uniIcons} from '@dcloudio/uni-ui'
import {mapState} from 'vuex'

export default {
  name: 'mine',
  components: {
    uniIcons
  },
  data() {
    return {
      // username: ''
    }
  },
  computed:{
  	...mapState(['hasLogin', 'userInfo']),
  },
  methods: {
	toSelfCenter(){
		console.log('打开用户中心')
		uni.navigateTo({
			url: '/pages/mine/selfCenter'
		})
	},
    openMyRemark() {
      uni.navigateTo({
        url: '/pages/mine/myRemark?remarkMasterId='+this.userInfo.id
      })
    },
	openActivityApply(){
		uni.navigateTo({
		  url: '/pages/mine/application/activity-apply'
		})
	},
    openMyMessage() {
      // uni.navigateTo({
      //   url: '/pages/mine/myMessage'
      // })
	  uni.navigateTo({
	  	url: '/pages/mine/selfCenter'
	  })
    },
    openMyDisk() {
      uni.navigateTo({
        url: '/pages/mine/myDiskTable'
      })
    },
    gotoLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
	mpGetUserInfo(result) {  // 小程序可以在未登录时获取用户信息 APP不可
		console.log('mpGetUserInfo', result);
		if (result.detail.errMsg !== 'getUserInfo:ok') {
			// uni.showModal({
			// 	title: '获取用户信息失败',
			// 	content: '错误原因' + result.detail.errMsg,
			// 	showCancel: false
			// });
			// return;
			uni.navigateTo({
			  url: `/pages/login/index`
			})
			return;
		}
		const {avatarUrl, nickName} = result.detail.userInfo
		uni.navigateTo({
		  url: `/pages/login/index?avatarUrl=${avatarUrl}&nickName=${nickName}`
		})
	}
  }
}
</script>

<style lang='scss'>
  page {
    background-color: #f5f5f5;
  }
  .header {
    position: relative;
    padding-bottom: 15px;
    .header-background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      // 模糊处理
      filter: blur(8px);
      // 透明处理
      opacity: 0.3;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .header-photo {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 30px;
      .header-photo-box {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .header-username {
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
      }
      button {
        margin-top: 10px;
      }
    }
    .header-info {
      margin-top: 15px;
      display: flex;
      .header-info-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 12px;
        color: #999999;
        .header-like {
          font-size: 14px;
          color: #333333;;
        }
      }
    }
  }
  .content {
    .content-list {
      display: flex;
      justify-content: space-between;
      padding: 15px;
      margin-bottom: 10px;
      background-color: #ffffff;
      color: #333333;
      font-size: 14px;
      .content-list-title {
        display: flex;
        align-items: center;
      }
    }
    .icon {
      display: inline-block;
      padding-right: 10px;
      color: $theme-color;
    }
  }
</style>